<template>
	<view class="Auditor">
		<navBar isBack backColor="#fff" title="审核" color="#fff" background="transparent"></navBar>
		<view class="a_topImg">
			<image src="https://manager.ryz1620.com/static/distri/makerCenter/bg.png" mode=""></image>
			<!-- 申请人员 -->
			<view class="a_remoElite">
				<view class="a_nowRatio">
					{{total}}人
					<view class="a_nowRatioItem">
						<image src="https://manager.ryz1620.com/static/distri/fenxiao/makerEli2.png" mode=""></image>
						申请人员
					</view>
				</view>
				<!-- 移除精英按钮 -->
				<view class="a_remoBtn" @click="_batchAudit">
					<image v-if="!batchA" src="https://manager.ryz1620.com/static/distri/fenxiao/removeEli2.png" mode=""></image>
					<image v-else src="https://manager.ryz1620.com/static/distri/fenxiao/removeNot.png" mode=""></image>
					{{batchText}}
				</view>
			</view>
		</view>
		
		
		<!-- 申请人员列表 -->
		<scroll-view scroll-y="true" class="a_batchList" :style="'margin-top:'+navHeight+'rpx;'">
			<view class="a_batchItem" v-for="(item,index) in batchList" :key='index'>
				<view class="a_itemUser">
					<view class="a_userImg">
						<image :src="item.headimg" mode=""></image>
					</view>
					<view class="a_userName">
						<span>{{item.realname}}</span>
						申请时间：{{item.create_time}}
					</view>
				</view>
				<!-- 单个按钮 -->
				<view v-if="!batchA" class="a_agreeBtn" @click="toPassBtn(item.id)">同意申请</view>
				
				<!-- 多选按钮 -->
				<checkbox-group v-else name="" @change="_changeCheck(index)">
					<label>
						<checkbox value="" :checked="item.checked" color="#DBA954"/>
					</label>
				</checkbox-group>
			</view>
		</scroll-view>
		
		<view class="a_allCheckBtn" v-if="batchA">
			<checkbox-group name="" @change="_toAllcheck">
				<label>
					<checkbox value="" shape="circle" :checked="allCheck" /><text>全选</text>
				</label>
			</checkbox-group>
			<view class="a_allCheckRight">
				<view @click="_toBackBatch">驳回</view>
				<view @click="_toAgreeBatch" class="a_allCheckAgree">同意</view>
			</view>
		</view>
		
		<!-- /遮罩是否驳回或同意 -->
		<view class="a_btnShadow" v-if="openBtnShadow">
			<view class="a_btnContent">
				<h3>确定要{{openShadowText}}这些人员吗？</h3>
				<view class="a_btn">
					<view @click="_cancelFn">取消</view>
					<view @click="_deterFn" class="a_btn2">确认</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import navBar from '@/components/navBar/navBar.vue';
	import service_distri from '@/service/distri.js';
	export default{
		components:{
			navBar
		},
		data(){
			return{
				batchA:false,//是否点击批量审核
				batchText:'批量审核',
				openBtnShadow:false,//打开或关闭遮罩
				openShadowText:'操作',
				allCheck:false,//是否为全选
				batchList:[{
					userImg:this.$static+'/static/distri/distriMoney/1.png',
					userName:'明世隐',
					endTime:'2021-1-18',
					checked:false
				},{
					userImg:'https://manager.ryz1620.com/static/distri/distriMoney/rtg.png',
					userName:'安琪拉',
					endTime:'2021-1-18',
					checked:false
				},{
					userImg:'https://manager.ryz1620.com/static/distri/distriMoney/123.png',
					userName:'史塔克',
					endTime:'2021-1-18',
					checked:false
				},{
					userImg:'https://manager.ryz1620.com/static/distri/distriMoney/4535.png',
					userName:'花木兰',
					endTime:'2021-1-18',
					checked:false
				}],
				page:1,
				pagesize:10,
				total:0,
				navHeight:200,
			}
		},
		onLoad(options) {
			this.navHeight = 470 - Number(this.$store.state.system.navBarHeight)*2
			this.getAuditorList()
		},
		methods:{
			// 获取申请人员列表
			getAuditorList(){
				service_distri.get_auditorList({page:this.page,pagesize:this.pagesize}).then(res=>{
					console.log(res)
					if(res.code==1){
						res.data.list.map(item=>{item.checked=false})
						res.data.list.map(item=>{item.create_time = this.$utils.getFormatDate(item.create_time*1000,'yyyy-MM-dd')})
						this.total = res.data.total;
						this.batchList = res.data.list?res.data.list:[]
					}
				})
			},
			
			// 单个点击同意申请
			toPassBtn(ids){
				service_distri.toPass({ids,status:1}).then(res=>{
					console.log(res)
					if(res.code==1){
						this.getAuditorList()
						uni.showToast({
							title:'已同意',
							icon:'success'
						})
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
			},
			
			//点击批量审核
			_batchAudit(){
				if(!this.batchA){
					this.batchA = true
					this.batchText = '取消操作'
				}else{
					this.batchA = false
					this.batchList.map(item=>item.checked=false)
					this.batchText = '批量审核'
				}
			},
			
			//单个点击
			_changeCheck(index){
				if(this.batchList[index].checked){
					this.batchList[index].checked=false
				}else{
					this.batchList[index].checked=true
				}
				
				//当所有选中时点亮全选按钮
				let allCheck = this.batchList.every(item=>item.checked)
				this.allCheck = allCheck
			},
			
			//点击全选
			_toAllcheck(){
				this.allCheck?this.allCheck=false:this.allCheck=true;
				console.log(this.allCheck)
				this.batchList.map(item=>item.checked=this.allCheck)
			},
			
			//点击驳回
			_toBackBatch(){
				let openShadow = this.batchList.every(item=>!item.checked)
				console.log(openShadow)
				if(openShadow){
					uni.showToast({
						title:'请选择需要操作的人',
						icon:'none'
					})
				}else{
					this.openBtnShadow = true,
					this.openShadowText = '驳回'
				}
			},
			
			//点击同意
			_toAgreeBatch(){
				let openShadow = this.batchList.every(item=>!item.checked)
				if(openShadow){
					uni.showToast({
						title:'请选择需要操作的人',
						icon:'none'
					})
				}else{
					this.openBtnShadow = true,
					this.openShadowText = '同意'
				}
			},
			
			//遮罩取消
			_cancelFn(){
				this.openBtnShadow = false
			},
			
			//遮罩确认
			_deterFn(){
				let arr = []
				this.batchList.map(item=>{
					if(item.checked){
						arr.push(item.id)
					}
				})
				console.log(arr)
				let ids = arr.join(',')
				let status = this.openShadowText=='同意'?1:0;
				service_distri.toPass({ids,status}).then(res=>{
					console.log(res)
					if(res.code==1){
						this.getAuditorList()
						uni.showToast({
							title:status==1?'已同意':'已驳回',
							icon:'success'
						})
						this.openBtnShadow = false
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
			}
			
			
		}
	}
</script>

<style lang="scss" scoped>
	.Auditor{
		padding-bottom: constant(safe-area-inset-bottom);///兼容 IOS<11.2/
		padding-bottom: env(safe-area-inset-bottom);///兼容 IOS>11.2/
		.a_topImg{width: 100%;height: 430rpx;position: absolute;top: 0;left: 0;z-index: 0;image{width: 100%;height: 100%;}}
		// 创客精英
		.a_remoElite{
			width: 100%;
			position: absolute;
			left: 0;
			bottom: 60rpx;
			z-index: 2;
			padding: 0 24rpx 0 36rpx;
			display: flex;
			align-items: center;
			// margin-top: 78rpx;
			justify-content: space-between;
			.a_nowRatio{
				font: 500 60rpx/52rpx PingFang SC;
				color: #fff;
				.a_nowRatioItem{
					margin-top: 20rpx;
					display: flex;
					font: 500 30rpx/40rpx PingFang SC;
					image{
						width: 40rpx;
						height: 40rpx;
						margin-right: 16rpx;
					}
				}
			}
			.a_remoBtn{
				width: 160rpx;
				height: 52rpx;
				border: 2rpx solid #FFFFFF;
				border-radius: 26rpx;
				image{width: 32rpx;height: 32rpx;}
				padding: 0 16rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font: 400 22rpx/52rpx PingFang SC;
				color: #fff;
			}
		}
		
		//申请人员列表
		.a_batchList{
			width: 702rpx;
			// height: 946rpx;
			margin: 0 auto 140rpx;
			background-color: #fff;
			border-radius: 16rpx;
			padding: 10rpx 24rpx 10rpx 24rpx;
			.a_batchItem{
				padding: 30rpx 0 28rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 2rpx solid #F4F4F4;
				.a_itemUser{
					display: flex;
					align-items: center;
					.a_userImg{
						width: 96rpx;
						height: 96rpx;
						margin-right: 24rpx;
						image:{width: 96rpx;height: 96rpx;}
					}
					.a_userName{
						display: flex;
						flex-direction: column;
						font: 400 22rpx/36rpx PingFang SC;
						color: #A0A0A0;
						span{font: 600 26rpx/40rpx PingFang SC;color: #0A0605;margin-bottom: 12rpx;}
					}
				}
				.a_agreeBtn{
					width: 160rpx;
					height: 60rpx;
					border-radius: 44rpx;
					border: 2rpx solid #DBA954;
					text-align: center;
					font: 600 24rpx/60rpx PingFang SC;
					color: #DBA954;
				}
			}
		}
		.a_allCheckBtn{
			width: 100%;
			// height: 92rpx;
			background-color: #fff;
			position: fixed;
			left: 0;
			bottom: 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 16rpx 24rpx;
			text{font: 500 26rpx/60rpx PingFang SC;color: #A0A0A0;}
			height: calc(92rpx+ constant(safe-area-inset-bottom));///兼容 IOS<11.2/
			height: calc(92rpx + env(safe-area-inset-bottom));///兼容 IOS>11.2/
			padding-bottom: constant(safe-area-inset-bottom);///兼容 IOS<11.2/
			padding-bottom: env(safe-area-inset-bottom);///兼容 IOS>11.2/
			text{margin-left: 10rpx;}
			.a_allCheckRight{
				display: flex;
				view{
					width: 156rpx;
					height: 60rpx;
					background: #FFFFFF;
					border: 2rpx solid #E75B43;
					border-radius: 32rpx;
					text-align: center;
					font: 600 24rpx/60rpx PingFang SC;
					color: #FA4E37;
				}
				.a_allCheckAgree{color: #94E3B4;border-color: #94E3B4;margin-left: 16rpx;}
			}
		}
		
		//遮罩
		.a_btnShadow{
			width: 100%;
			height: 100%;
			position: fixed;				
			z-index: 10;
			top: 0;
			left: 0;
			text-align: center;
			background-color: rgba(0,0,0,0.6);
			.a_btnContent{
				width: 528rpx;
				height: 260rpx;
				background-color: #fff;
				border-radius: 8rpx;
				position: absolute;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				margin: auto;
				padding: 40rpx 48rpx;
				h3{font: 600 30rpx/40rpx PingFang SC; color:#292A2B;}
				.a_btn{
					margin-top: 74rpx;
					display: flex;
					justify-content: space-between;
					view{
						width: 196rpx;
						height: 64rpx;
						border-radius: 32rpx;
						background-color: #F5F5F5;
						font: 400 26rpx/64rpx PingFang SC; 
						color:#0A0605;
					}
					.a_btn2{
						background-color: #EBB964;
						color: #fff;
					}
				}
			}
		}
	}
</style>
